@font-face {
	font-family: 'iconfont';
	src: url('../../fonts/iconfont.ttf') format('truetype');
}
html,body{
	width: 100%; height: 100%; overflow: hidden; overflow-y: auto; 
}
html,body,span,div,label{
	font-family: "Microsoft YaHei",SimSun,Arial,Helvetica,sans-serif; font-size: 12px;
	margin: 0px; padding: 0px; border: 0px;
}
input{
	font-family: "Microsoft YaHei",SimSun,Arial,Helvetica,sans-serif; font-size: 12px;
	margin: 0px; padding: 0px 5px; border: 1px solid #cccccc; border-radius: 5px; 
}

/* 设置滚动条的样式 */
body::-webkit-scrollbar {
	width: 5px; height: 5px; 
	border-radius: 5px;
}
/* 滚动槽 */
body::-webkit-scrollbar-track {
	-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.2);
	background-color: #f7f7f7; border-radius: 2px; 
}
/* 滚动条滑块 */
body::-webkit-scrollbar-thumb {
    -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.2);
    background: #c7c7c7; border-radius: 2px; 
}

#app {
	width: calc(100% - 4vw); height: auto;
	padding: 2vh 2vw;
	display: flex; flex-flow: row wrap; 
	justify-content: flex-start; align-content: flex-start;
	overflow: hidden;
}
#app>div{
	width: 263px; height: 113px;
	border: 1px solid #DCDCDC; border-radius: 4px;
	margin: 5px; padding: 5px;
}
#app .api-item{
	background-size: cover;
	background-repeat:no-repeat;
	display: flex; flex-flow: column nowrap; justify-content: space-between;
	flex: 0 0 auto;
}
#app .api-item-001{
	background-image: url("../images/item-001.jpg");
}
#app .api-item-002{
	background-image: url("../images/item-002.jpg");
}
#app .api-item-003{
	background-image: url("../images/item-003.jpg");
}
#app .api-item-004{
	background-image: url("../images/item-004.jpg");
}
#app .api-item-005{
	background-image: url("../images/item-005.jpg");
}
#app .api-item>div{
	width: 100%;
	display: inline-flex; flex-flow: row nowrap; justify-content: space-between;
}
#app .api-item div, div.item .api-item span{
	color: #FFFFFF; font-size: 14px;
}
#app .api-item>div:first-child>span:first-child{
	width: 80%;
	font-size: 1.2em; font-weight: bolder;
	overflow: hidden; white-space: pre-wrap; text-overflow: ellipsis;
}
#app .api-item>div:first-child>span:last-child{
	font-family: iconfont; display: none;
	cursor: pointer;
}
#app .api-item:hover>div:first-child>span:last-child{
	display: inline-block;
}
#app .api-item>div:nth-child(2){
	width: 80%; height: auto; max-height: 45%;
	font-size: 1.5em;
	display: block; overflow: hidden;
	text-align: center; vertical-align: middle;
	align-self: center;
}
#app .api-item>div:last-child>span:first-child{
	font-size: 0.9em; color: #CCCCCC;
}
#app .api-item>div:last-child>span:last-child{
	font-family: iconfont; font-size: 0.9em; font-style: oblique;
	cursor: pointer;
}
#app .add-item{
	font-family: iconfont; font-size: 24px;
	line-height: 113px; text-align: center;
	cursor: pointer;
}





